<template>
    <div>
        <!-- 列表页面 -->
        <div class="container">
            <div class="header">
                <div class="title">banner列表</div>
            </div>
            <!-- 表格 -->
            <lin-table
                    border
                    :tableColumn="tableColumn"
                    :tableData="tableData"
                    :operate="operate"
                    @handleEdit="handleEdit"
                    v-loading="loading"></lin-table>
        </div>
    </div>
</template>

<script>
import banner from '@/models/banner'
import LinTable from '@/components/base/table/lin-table'

export default {
  components: {
    LinTable,
  },
  data() {
    return {
      tableColumn: [{ prop: 'name', label: '标题' }],
      tableData: [],
      operate: [],
      editBookID: 1,
    }
  },
  async created() {
    this.loading = true
    this.getBanners()
    this.operate = [{ name: '查看', func: 'handleEdit', type: 'primary' }]
    this.loading = false
  },
  methods: {
    async getBanners() {
      const banner_list = await banner.getBanners()
      this.tableData = banner_list
    },
    handleEdit(val) {
      this.$router.push({
        path: `/banner/${val.row.id}`,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
    .container {
        padding: 0 30px;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                height: 59px;
                line-height: 59px;
                color: $parent-title-color;
                font-size: 16px;
                font-weight: 500;
            }
        }
        .pagination {
            display: flex;
            justify-content: flex-end;
            margin: 20px;
        }
    }
</style>
